import './index.scss'
import { Card, Button, Form, Input } from 'antd'
import { PhoneOutlined, UserOutlined,  SolutionOutlined, RightCircleTwoTone } from '@ant-design/icons'
import { Link, useNavigate } from 'react-router-dom'
import { message } from 'antd'
import { getUserForgetPasswordAPI } from '@/api/user'


const ForgetPassword = () => {
  const navigate = useNavigate()
  // 点击确认按钮时触发 
  const onFinish = async formValue => {
    const res = await getUserForgetPasswordAPI(formValue)
    if (res.code === 1) {
      message.success('密码初始化为123456')
      navigate('/login')
    } else {
      message.error(res.msg)
    }
    
  }

  return (
    <div className="forget-password">
      <Card className="forget-password-container">
        <div className='header'>忘记密码</div>
        <Form
          onFinish={onFinish}
          validateTrigger={['onBlur']}>
            <Form.Item
            name="username"
            rules={[
              {
                required: true,
                message: '请输入用户名',
              },
            ]}
          >
            <Input
            prefix={<UserOutlined/>} 
            placeholder="请输入用户名" 
            size="large"/>
          </Form.Item>
          <Form.Item
            name="phone"
            rules={[
              {
                required: true,
                message: '请输入电话号码',
              },
              {
                pattern: /^1[3-9]\d{9}$/,
                message: '手机号码格式不对'
              }
            ]}
          >
            <Input
              size='large'
              placeholder="请输入手机号码"
              prefix={<PhoneOutlined />}
              style={{
                width: '100%',
              }}
            />
          </Form.Item>
          <Form.Item
            name="idNumber"
            rules={[
              {
                required: true,
                message: '请输入身份证号码',
              },
              {
                pattern: /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[Xx\d]$/            ,
                message: '身份证号码格式不对'
              }
            ]}
          >
            <Input
              size='large'
              placeholder="请输入身份证号码"
              prefix={<SolutionOutlined />}
              style={{
                width: '100%',
              }}
            />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" className="register-form-button" size="large">
              确认
            </Button>
            <RightCircleTwoTone />
            <Link className='to-login' to={'/login'}>返回登录</Link>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}


export default ForgetPassword